import React, { useState } from 'react';
import DemoBlock from '../../../site/components/DemoBlock';
import useDemoTranslate from '../../../site/hooks/use-demo-translate';
import Button from '../../button/index';
import { Dictionary } from '../../utils/interface';
import { createBEM } from '../../utils/namespace';
import Circle from '../index';
import './basic.less';

const bem = createBEM('demo-circle');

const I18N: Dictionary<Dictionary<string>> = {
	'zh-CN': {
		basicUsage: '基础用法',
		gradient: '渐变色',
		gapPosition: '仪表盘',
		customSize: '大小定制',
		customStyle: '样式定制',
		customColor: '颜色定制',
		customWidth: '宽度定制',
		counterClockwise: '逆时针',
	},
	'en-US': {
		basicUsage: 'BasicUsage',
		gradient: 'Gradient',
		gapPosition: 'Dashboard',
		customSize: 'Custom Size',
		customStyle: 'Custom Style',
		customColor: 'Custom Color',
		customWidth: 'Custom Width',
		counterClockwise: 'Counter Clockwise',
	},
};

const format = (rate: number) => Math.min(Math.max(rate, 0), 100);

export default function Basic(): ReturnType<React.FC> {
	const [i18n] = useDemoTranslate(I18N, 'en-US');
	const [progress, setProgress] = useState<number>(70);

	const addProgress = () => {
		setProgress(format(progress + 15));
	};

	const reduceProgress = () => {
		setProgress(format(progress - 15));
	};

	const gradientColor = {
		'0%': '#3fecff',
		'100%': '#6149f6',
	};

	return (
		<div className={bem()}>
			<DemoBlock title={i18n.basicUsage}>
				<Circle size="80px" progress={progress}>
					{progress}%
				</Circle>
			</DemoBlock>
			<DemoBlock title={i18n.customStyle}>
				<Circle
					size="80px"
					progress={progress}
					speed={10}
					strokeWidth={10}
				>
					{i18n.customWidth}
				</Circle>
				<Circle
					progress={progress}
					size="80px"
					gapPosition="bottom"
					gapDegree={50}
					strokeWidth={10}
				>
					{i18n.gapPosition}
				</Circle>
				<Circle
					size="80px"
					progress={progress}
					speed={10}
					strokeColor="#ee0a24"
					trailColor="#ebedf0"
				>
					{i18n.customColor}
				</Circle>
				<Circle
					size="80px"
					progress={progress}
					speed={10}
					strokeColor={gradientColor}
				>
					{i18n.gradient}
				</Circle>
				<Circle
					size="80px"
					progress={progress}
					speed={10}
					strokeColor="#07c160"
					clockwise={false}
				>
					{i18n.counterClockwise}
				</Circle>
				<Circle
					progress={progress}
					speed={10}
					size="120px"
					strokeColor="#7232dd"
					clockwise={false}
				>
					{i18n.customSize}
				</Circle>
			</DemoBlock>

			<Button type="primary" onClick={addProgress}>
				增加
			</Button>
			<Button type="danger" onClick={reduceProgress}>
				减少
			</Button>
		</div>
	);
}
